<template>
  <div>









    <div class="table-container">
      <el-table :data="tableData" style="width: 100%" v-loading="loading" element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading" class="tableBox">

        <el-table-column label="采样编号" prop="sampleNum" show-overflow-tooltip></el-table-column>
        <el-table-column label="桨频（桨/分钟）" prop="strokeRate" show-overflow-tooltip></el-table-column>
        <el-table-column label="平均艇速（m/s）" prop="averageBoatSpeed" show-overflow-tooltip></el-table-column>
        <el-table-column label="2000m时间（分钟:秒）" prop="timeOver2000M" show-overflow-tooltip></el-table-column>
        <el-table-column label="桨数" prop="strokesCount" show-overflow-tooltip></el-table-column>
        <el-table-column label="拉桨时间(s)" prop="driveTime" show-overflow-tooltip></el-table-column>
        <el-table-column label="入水角度（度）" prop="catchAngle" show-overflow-tooltip></el-table-column>
        <el-table-column label="出水角度（度）" prop="finishAngle" show-overflow-tooltip></el-table-column>
        <el-table-column label="越空（度）" prop="catchSlip" show-overflow-tooltip></el-table-column>
        <el-table-column label="飘桨（度）" prop="releasesSlip" show-overflow-tooltip></el-table-column>
        <el-table-column label="有效水平幅度" prop="effectiveAngleDeg" show-overflow-tooltip></el-table-column>
        <el-table-column label="幅度效率" prop="effectiveAnglePercent" show-overflow-tooltip></el-table-column>
        <el-table-column label="最大拉桨速度" prop="maxHandleVelocity" show-overflow-tooltip></el-table-column>
        <el-table-column label="平均拉桨速度" prop="averageHandleVelocity" show-overflow-tooltip></el-table-column>

        <template slot="empty" v-if="!tableData.length">
          <div
            style="
                                                                                                                                                                                                                                                                                    height: 500px;
                                                                                                                                                                                                                                                                                    display: flex;
                                                                                                                                                                                                                                                                                    flex-direction: column;
                                                                                                                                                                                                                                                                                    justify-content: center;
                                                                                                                                                                                                                                                                                    align-items: center;
                                                                                                                                                                                                                                                                                  ">
            <i class="icon_admin icon-gonggongtubiao_konghezi"></i>
            <div style="font-size: 14px" v-show="searchKey == 0">空空如也 ~</div>
            <div style="font-size: 14px" v-show="searchKey == 1">查询无数据，请重新输入查询条件</div>
          </div>
        </template>
      </el-table>
    </div>

    <!-- <div class="foot">
      <div class="pagination-container">
        <el-pagination background v-show="tableData.length" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" layout="total,prev, pager, next, sizes,jumper" :page-size="page.size"
          :page-sizes="[10, 50, 100]" :current-page.sync="page.current" :total="total"></el-pagination>
      </div>
    </div> -->






  </div>
</template>
<script>
import { getTrainListApi, uploadTrainFileApi, detailListApi } from "@/api/specializedTraining"


export default {
  data() {

    return {

      query: {
        date: "",
        athleteName: "",
        boat: "",
        loc: "",
        coach: ""
      },
      loading: false,
      searchKey: 0,

      page: {
        size: 10,
        current: 1
      },
      total: 0,
      tableData: [],



    };
  },
  created() {
    this.onload(this.query);

  },

  methods: {



    onload(query) {
      this.loading = true;
      detailListApi({ trainingId: this.$route.query.trainingId }).then(res => {

        this.tableData = res.sampleDataList;
        this.loading = false;
      });


    },
    // //分页
    // handleCurrentChange(val) {
    //     this.page.current = val;
    //     this.onload(this.page, this.query);
    // },
    // handleSizeChange(val) {
    //     this.page.size = val;
    //     this.onload(this.page, this.query);
    // },



    //查询
    handleSearch() {
      this.searchKey = 1;
      this.page.current = 1;
      this.onload(this.query);
    },






  }
};
</script>
<style lang="scss">
.pieDom {
  height: 223px;
  background-color: #fff;
}
</style>